import { Link } from "react-router-dom";

const ProductManagement = () => {
  const products = [
    { id: 1, name: "现代简约沙发", category: "沙发", price: 2999, stock: 50, status: "上架" },
    { id: 2, name: "实木餐桌", category: "餐桌椅", price: 1899, stock: 30, status: "上架" },
    { id: 3, name: "舒适办公椅", category: "办公家具", price: 899, stock: 100, status: "上架" },
    { id: 4, name: "双人床架", category: "床具", price: 3599, stock: 20, status: "下架" },
    { id: 5, name: "书桌组合", category: "办公家具", price: 1599, stock: 40, status: "上架" },
  ];

  const categories = ["全部", "沙发", "餐桌椅", "床具", "办公家具", "储物"];

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-8">
        <h1 className="text-3xl font-bold">商品管理</h1>
        <button className="bg-blue-500 text-white font-semibold py-2 px-6 rounded-lg hover:bg-blue-600 transition duration-300">
          添加商品
        </button>
      </div>
      
      {/* Filters */}
      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label className="block text-gray-700 mb-2">商品名称</label>
            <input 
              type="text" 
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="搜索商品名称"
            />
          </div>
          <div>
            <label className="block text-gray-700 mb-2">分类</label>
            <select className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
              {categories.map((category, index) => (
                <option key={index} value={category}>{category}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-gray-700 mb-2">状态</label>
            <select className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option value="全部">全部</option>
              <option value="上架">上架</option>
              <option value="下架">下架</option>
            </select>
          </div>
          <div className="flex items-end">
            <button className="w-full bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition duration-300">
              重置
            </button>
            <button className="w-full ml-2 bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300">
              搜索
            </button>
          </div>
        </div>
      </div>
      
      {/* Product Table */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-100">
              <tr>
                <th className="text-left py-3 px-4">商品</th>
                <th className="text-left py-3 px-4">分类</th>
                <th className="text-right py-3 px-4">价格</th>
                <th className="text-right py-3 px-4">库存</th>
                <th className="text-left py-3 px-4">状态</th>
                <th className="text-right py-3 px-4">操作</th>
              </tr>
            </thead>
            <tbody>
              {products.map((product) => (
                <tr key={product.id} className="border-b hover:bg-gray-50">
                  <td className="py-3 px-4">
                    <div className="flex items-center">
                      <div className="bg-gray-200 w-12 h-12 rounded mr-4 flex items-center justify-center">
                        <span className="text-gray-500 text-xs">图片</span>
                      </div>
                      <span className="font-medium">{product.name}</span>
                    </div>
                  </td>
                  <td className="py-3 px-4">{product.category}</td>
                  <td className="py-3 px-4 text-right">¥{product.price}</td>
                  <td className="py-3 px-4 text-right">{product.stock}</td>
                  <td className="py-3 px-4">
                    <span className={`px-2 py-1 rounded text-sm ${
                      product.status === "上架" 
                        ? "bg-green-100 text-green-800" 
                        : "bg-red-100 text-red-800"
                    }`}>
                      {product.status}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-right">
                    <div className="flex justify-end space-x-2">
                      <button className="text-blue-500 hover:text-blue-700">
                        编辑
                      </button>
                      <button className="text-gray-500 hover:text-gray-700">
                        下架
                      </button>
                      <button className="text-red-500 hover:text-red-700">
                        删除
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* Pagination */}
        <div className="p-4 flex justify-between items-center">
          <div className="text-gray-600">
            显示 1 到 {products.length} 条，共 {products.length} 条记录
          </div>
          <div className="flex gap-2">
            {[1].map((page) => (
              <button
                key={page}
                className={`w-10 h-10 rounded-full ${
                  page === 1 
                    ? "bg-blue-500 text-white" 
                    : "bg-gray-200 text-gray-700 hover:bg-gray-300"
                }`}
              >
                {page}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductManagement;